<template>
    <div>
        <Header></Header>
        <div class="button-nav p-40" v-loading="loading">
            <div class="box">
                <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex font-14">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>考试</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between mt-20">
                    <div class="flex items-center">
                        <el-icon size="30">
                            <Clock/>
                        </el-icon>
                        <div class="ml-10">
                            考试时间
                            <text class="color-red">{{ examInfo.exam_time }}</text>
                            分钟；
                            总分
                            <text class="color-red">{{ score }}</text>
                            分；
                            剩余时间
                            <text class="color-red">{{ countTime }}</text>
                        </div>
                    </div>
                    <div class="flex">
                        <el-button type="primary" @click="dialogVisible = true">提交答案</el-button>
                        <el-button type="success" @click="showLeft = true">检测答卷</el-button>
                        <el-button type="" @click="dialogVisible = true">退出考试</el-button>
                    </div>
                </div>
                <!--   单选题     -->
                <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between mt-20">
                    <div class="font-bold">
                        第1部分：单选题 共
                        <text class="color-blue">{{ paperInfo.single_choice }}</text>
                        题，
                        每题
                        <text class="color-blue">{{ examInfo.single_score }}</text>
                        分
                    </div>
                </div>
                <div class="border-dash pt-30 pb-30 pl-20 pr-20 bg-white" v-for="(item, index) in single_choice"
                     :key="index" :id="'a'+index">
                    <div>{{ (index + 1) }}、{{ item.title }}</div>
                    <el-radio-group
                            v-model="item.user_answer"
                            @change="(e) => { this.radioChange(e, item) }"
                            class="mt-20 flex-colum flex-align-start pl-20">
                        <el-radio v-for="(itd, idx) in item.options_json" :key="idx" :label="idx" size="large">{{
                            idx
                            }}、{{ itd }}
                        </el-radio>
                    </el-radio-group>
                    <div class="p-20 border-dash bg-grey mt-20">
                        <el-button type="" style="width: 100px" v-if="item.is_select === 0" @click="item.is_select = 1">
                            标记
                        </el-button>
                        <el-button type="danger" style="width: 100px" v-if="item.is_select === 1"
                                   @click="item.is_select = 0">取消标记
                        </el-button>
                    </div>
                </div>
                <!--   多选题     -->
                <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between mt-20">
                    <div class="font-bold">
                        第2部分：多选题 共
                        <text class="color-blue">{{ paperInfo.multiple_choice }}</text>
                        题，
                        每题
                        <text class="color-blue">{{ examInfo.multiple_score }}</text>
                        分
                    </div>
                </div>
                <div class="border-dash pt-30 pb-30 pl-20 pr-20 bg-white" v-for="(item, index) in multiple_choice"
                     :key="index" :id="'a'+(index+1) + single_choice.length">
                    <div>{{ (index + 1) + single_choice.length }}、{{ item.title }}</div>
                    <el-checkbox-group v-model="item.user_answer" class="pl-20 mt-20"
                                       @change="(e) => { this.checkChange(e, item) }">
                        <div class="mt-10" v-for="(itd, idx) in item.options_json" :key="idx">
                            <el-checkbox :label="idx">{{ idx }}、{{ itd }}</el-checkbox>
                        </div>
                    </el-checkbox-group>
                    <div class="p-20 border-dash bg-grey mt-20">
                        <el-button type="" style="width: 100px" v-if="item.is_select === 0" @click="item.is_select = 1">
                            标记
                        </el-button>
                        <el-button type="danger" style="width: 100px" v-if="item.is_select === 1"
                                   @click="item.is_select = 0">取消标记
                        </el-button>
                    </div>
                </div>
                <!--   判断题     -->
                <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between mt-20">
                    <div class="font-bold">
                        第3部分：判断题 共
                        <text class="color-blue">{{ paperInfo.judge_choice }}</text>
                        题，
                        每题
                        <text class="color-blue">{{ examInfo.judge_score }}</text>
                        分
                    </div>
                </div>
                <div class="border-dash pt-30 pb-30 pl-20 pr-20 bg-white" v-for="(item, index) in judge_choice"
                     :key="index" :id="'a'+(index+1) + judge_choice.length + single_choice.length">
                    <div>{{ (index + 1) + multiple_choice.length + single_choice.length }}、{{ item.title }}</div>
                    <el-radio-group v-model="item.user_answer" @change="(e) => { this.radioChange(e, item) }"
                                    class="mt-20 flex-colum flex-align-start pl-20">
                        <el-radio v-for="(itd, idx) in item.options_json" :key="idx" :label="idx" size="large">{{
                            itd
                            }}
                        </el-radio>
                    </el-radio-group>
                    <div class="p-20 border-dash bg-grey mt-20">
                        <el-button type="" style="width: 100px" v-if="item.is_select === 0" @click="item.is_select = 1">
                            标记
                        </el-button>
                        <el-button type="danger" style="width: 100px" v-if="item.is_select === 1"
                                   @click="item.is_select = 0">取消标记
                        </el-button>
                    </div>
                </div>
                <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between mt-20">
                    <div class="flex items-center">
                        <el-icon size="30">
                            <Clock/>
                        </el-icon>
                        <div class="ml-10">
                            考试时间
                            <text class="color-red">{{ examInfo.exam_time }}</text>
                            分钟；
                            总分
                            <text class="color-red">{{ score }}</text>
                            分；
                            剩余时间
                            <text class="color-red">{{ countTime }}</text>
                        </div>
                    </div>
                    <div class="flex">
                        <el-button type="primary" @click="dialogVisible = true">提交答案</el-button>
                        <!--            <el-button type="success" @click="showLeft = true">检测答卷</el-button>-->
                        <el-button type="" @click="dialogVisible = true">退出考试</el-button>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>

        <el-dialog
                v-model="dialogVisible"
                title="提示"
                width="30%"
        >
            <span>是否退出当前考试？</span>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="endExam">
          确定
        </el-button>
      </span>
            </template>
        </el-dialog>

        <el-drawer v-model="showLeft" direction="ltr">
            <template #title>
                <h4>检测答卷</h4>
            </template>
            <template #default>
                <div>
                    <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex">
                        <div class="font-bold flex items-center color-green">
                            <div style="width: 10px;height: 10px;background-color: #67C23A;margin-right: 5px;"></div>
                            <div>已答题</div>
                        </div>
                        <div class="font-bold flex items-center color-grey ml-20">
                            <div style="width: 10px;height: 10px;background-color: #777;margin-right: 5px;"></div>
                            <div>未答题</div>
                        </div>
                        <div class="font-bold flex items-center color-red ml-20">
                            <div style="width: 10px;height: 10px;background-color: #F56C6C;margin-right: 5px;"></div>
                            <div>标记</div>
                        </div>
                    </div>
                    <div class="flex items-center flex-wrap">
                        <div style="width: 25%" class="text-center mt-20 pointer hover-blue"
                             v-for="(item, index) in single_choice" :key="index"
                             @click="goRule(index+1)">
                            <div :class="[item.user_answer === '' ? 'color-grey' : 'color-green', item.is_select === 1 ? 'color-red' : '']">
                                第{{ index + 1 }}题
                            </div>
                        </div>
                        <div style="width: 25%" class="text-center mt-20 pointer hover-blue"
                             v-for="(item, index) in multiple_choice" :key="index"
                             @click="goRule((index+1)+single_choice.length)">
                            <div :class="[item.user_answer.length === 0 ? 'color-grey' : 'color-green', item.is_select === 1 ? 'color-red' : '']">
                                第{{ (index + 1) + single_choice.length }}题
                            </div>
                        </div>
                        <div style="width: 25%" class="text-center mt-20 pointer hover-blue"
                             v-for="(item, index) in judge_choice" :key="index"
                             @click="goRule((index+1)+single_choice.length+multiple_choice.length)">
                            <div :class="[item.user_answer === '' ? 'color-grey' : 'color-green', item.is_select === 1 ? 'color-red' : '']">
                                第{{ (index + 1) + multiple_choice.length + single_choice.length }}题
                            </div>
                        </div>
                    </div>
                    <!--          <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between">-->
                    <!--            <div class="font-bold">-->
                    <!--              已答题-->
                    <!--            </div>-->
                    <!--          </div>-->
                    <!--          <div class="flex items-center flex-wrap">-->
                    <!--            <div style="width: 25%" class="text-center mt-20 pointer hover-blue"-->
                    <!--                 v-for="(item, index) in 10" :key="index"-->
                    <!--                 @click="goRule(index+1)">第{{ index + 1 }}题-->
                    <!--            </div>-->
                    <!--          </div>-->
                    <!--          <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between mt-20">-->
                    <!--            <div class="font-bold">-->
                    <!--              未答题-->
                    <!--            </div>-->
                    <!--          </div>-->
                    <!--          <div class="pt-10 pb-10 pl-20 pr-20 ">单选题</div>-->
                    <!--          <div class="flex items-center flex-wrap">-->
                    <!--            <div style="width: 25%" class="text-center mt-20 pointer hover-blue"-->
                    <!--                 v-for="(item, index) in single_choice" :key="index"-->
                    <!--                 @click="goRule(index+1, 'a')">第{{ index + 1 }}题-->
                    <!--            </div>-->
                    <!--          </div>-->
                    <!--          <div class="pt-10 pb-10 pl-20 pr-20 ">多选题</div>-->
                    <!--          <div class="flex items-center flex-wrap">-->
                    <!--            <div style="width: 25%" class="text-center mt-20 pointer hover-blue"-->
                    <!--                 v-for="(item, index) in multiple_choice" :key="index"-->
                    <!--                 @click="goRule(index+1, 'b')">第{{ index + 1 }}题-->
                    <!--            </div>-->
                    <!--          </div>-->
                    <!--          <div class="pt-10 pb-10 pl-20 pr-20 ">判断题</div>-->
                    <!--          <div class="flex items-center flex-wrap">-->
                    <!--            <div style="width: 25%" class="text-center mt-20 pointer hover-blue"-->
                    <!--                 v-for="(item, index) in judge_choice" :key="index"-->
                    <!--                 @click="goRule(index+1, 'c')">第{{ index + 1 }}题-->
                    <!--            </div>-->
                    <!--          </div>-->
                    <!--          <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between mt-20">-->
                    <!--            <div class="font-bold">-->
                    <!--              标记-->
                    <!--            </div>-->
                    <!--          </div>-->
                    <!--          <div class="flex items-center flex-wrap">-->
                    <!--            <div style="width: 25%" class="text-center mt-20 pointer hover-blue"-->
                    <!--                 v-for="(item, index) in 2" :key="index"-->
                    <!--                 @click="goRule(index+1)">第{{ index + 1 }}题-->
                    <!--            </div>-->
                    <!--          </div>-->
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="showLeft = false">关闭</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import {addAnswer, endExam, startExam} from "@/api/api";

export default {
    name: "Questions",
    components: {
        Header, Footer
    },
    data() {
        return {
            dialogVisible: false,
            showLeft: false,
            radio1: '',
            radio2: [],
            radio3: '',
            loading: true,
            log_id: 0,
            exam_id: 0,
            examInfo: {},
            paperInfo: {},
            score: '',
            single_choice: [],
            multiple_choice: [],
            judge_choice: [],
            time: 1000,
            countTime: '',
            intervalClock: null
        }
    },
    mounted() {
        this.exam_id = this.$route.query.id
        this.getDetail()
    },
    methods: {
        async endExam() {
            let _this = this
            const data = await endExam({
                log_id: this.log_id,
                paper_id: this.paperInfo.id,
                exam_id: this.examInfo.id,
                time: this.time,
            })
            if (data) {
                this.$message.success('考试结束')
                localStorage.removeItem('exam')
                localStorage.removeItem('exam_time')
                clearInterval(this.intervalClock)
                setTimeout(() => {
                    _this.$router.push('/exam/end?id=' + _this.log_id)
                }, 1000)
            }
        },
        async radioChange(e, question) {
            question.user_answer = e
            console.log(this.single_choice)
            await addAnswer({
                log_id: this.log_id,
                paper_id: this.paperInfo.id,
                exam_id: this.exam_id,
                question_id: question.id,
                answer: e,
                time: this.time
            })
        },
        async checkChange(e, question) {
            question.user_answer = e
            console.log(this.single_choice)
            await addAnswer({
                log_id: this.log_id,
                paper_id: this.paperInfo.id,
                exam_id: this.exam_id,
                question_id: question.id,
                answer: e.toString(),
                time: this.time
            })
        },
        async getDetail() {
            const examInfo = await startExam({
                exam_id: this.exam_id
            })
            this.examInfo = examInfo.exam
            this.paperInfo = examInfo.paper
            this.log_id = examInfo.log_id
            this.score = examInfo.score
            this.single_choice = examInfo.single_choice
            this.multiple_choice = examInfo.multiple_choice
            this.judge_choice = examInfo.judge_choice
            console.log(examInfo.exam_time)
            if (examInfo.exam_time) {
                this.time = parseInt(examInfo.exam_time)
            } else {
                const exam_time = localStorage.getItem('exam_time')
                this.time = parseInt(exam_time)
            }
            this.TimeStart()
            localStorage.setItem('exam', JSON.stringify(examInfo))
            this.loading = false
        },
        // updateExamTime() {
        //   updateTime({
        //     log_id: this.log_id,
        //     time: this.time
        //   })
        // },
        goRule(event) {
            var id = "#a" + event;
            let target = document.querySelector(id);
            console.log(target)
            window.scrollTo({
                top: target.offsetTop,
                behavior: "smooth",
            });
        },
        // 天 时 分 秒 格式化函数
        countDown() {
            let h = parseInt(this.time / (60 * 60) % 24);
            h = h < 10 ? "0" + h : h
            let m = parseInt(this.time / 60 % 60);
            m = m < 10 ? "0" + m : m
            let s = parseInt(this.time % 60);
            s = s < 10 ? "0" + s : s
            this.countTime = h + '时' + m + '分' + s + '秒'
        },
        //定时器没过1秒参数减1
        TimeStart() {
            this.intervalClock = setInterval(() => {
                this.time -= 1
                localStorage.setItem('exam_time', this.time)
                if (this.time <= 0) {
                    this.endExam()
                } else {
                    this.countDown()
                    // this.updateExamTime()
                }
            }, 1000)
        },
    }
}
</script>

<style scoped>

</style>
